
<template>
  <div class="app-container">
    <!--<custom-dialog-->
      <!--:visible="dialogVisible"-->
      <!--v-if="dialogVisible && dialogName === 'log-dialog'"-->
      <!--returnButtonName="返回"-->
      <!--:callback="closeDialog"-->
    <!--&gt;-->
      <!--<div slot="title">&nbsp;</div>-->
      <!--<sub-game-tab-list/>-->
    <!--</custom-dialog>-->
    <el-form :inline="true" ref="conditionsSetForm" :model="form" label-width="124px">
      <el-form-item label="维护时间">
        <el-date-picker
          v-model="form.rangeTime"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          :default-time="['00:00:00', '23:59:59']"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="dateConfirm"
          :picker-options="pickerDayStep">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="操作人">
        <el-input v-model="form.lastOperator" placeholder="请输入操作人"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button @click="submitFilterForm">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataArray.list"
      v-loading="loading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="维护开始时间" align="center">
        <template slot-scope="{row}">{{row.beginTime|parseTime}}</template>
      </el-table-column>
      <el-table-column label="维护结束时间" align="center">
        <template slot-scope="{row}">{{row.endTime|parseTime}}</template>
      </el-table-column>
      <el-table-column label="游戏平台维护" align="center" prop="itemName">

      </el-table-column>
      <el-table-column label="游戏转账维护" align="center" prop="transferName">

      </el-table-column>

      <el-table-column label="维护详情" align="center">
        <template slot-scope="{row}">
          <el-tooltip class="item" effect="dark" placement="bottom-end">
            <div slot="content">
              <p>当前维护时间：</p>
              <p><span>{{row.beginTime|parseTime}}</span> - <span>{{row.endTime|parseTime}}</span></p>
              <p> 当前维护内容：</p>
              <p>{{row.reason}}</p>
            </div>
            <el-button>详情</el-button>
          </el-tooltip>
        </template>

      </el-table-column>
      <el-table-column label="操作时间" align="center">
        <template slot-scope="{row}">{{row.createTime|parseTime}}</template>
      </el-table-column>
      <el-table-column label="操作人" align="center" prop="lastOperator">
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="dataArray.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { form, grid, dialog ,pickerOption} from "@/build";

  import {gamePlatFormMainTainLog as mainTainLogList} from "@/services/api/game";

  export default {
    name: "mainTainLog",
    mixins: [form, grid, dialog ,pickerOption],
    props:['productId'],
    components: {
    },
    data() {
      const monthTime=[moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
      return {
        dataArray:{
          list:[],
          total:0
        },
        manual:true,
        showOrHide:false,
        form:{
          rangeTime:monthTime,
          lastOperator:''
        },
        filters:{
          beginTime:monthTime[0],
          endTime:monthTime[1],
          page: 1,
          size: 20,
          productId:'1'
        }
      };
    },
    computed: {
    },
    methods: {
      submitFilterForm() {
        if(!this.form.rangeTime){
          this.filters.beginTime='';
          this.filters.endTime='';
        }else {
          this.filters.beginTime=this.form.rangeTime[0];
          this.filters.endTime=this.form.rangeTime[1];

        }
        this.filters.lastOperator=this.form.lastOperator;
        this.gridSearch()
      },
      dateConfirm(){
        if(this.form.rangeTime==null){
          this.form.startDate='';
          this.form.endDate='';
        }
        if(this.form.rangeTime&&this.form.rangeTime.length>0){
          this.form.startDate=this.form.rangeTime[0];
          this.form.endDate=this.form.rangeTime[1];
        }
      }
    },
    mounted() {
      this.filters.productId=this.productId;
      this.bindGet(mainTainLogList, 'dataArray',{action:'getGrid',sendingData:'filters'});
      this.doGet({action:'getGrid'});
    }
  };
</script>
<style scoped lang="scss" type="text/css">
  .el-tabs__content{
    overflow: auto!important;
  }
</style>
